<template>
	<view class="app-tab-dt">
		<view :id="tabId" class="tab-dt app-before-line" :class="{'tab-fixed':fixed}">
			<uni-segmented-control :current="index" :values="items" v-on:clickItem="tapTab" styleType="text-line" activeColor="#0cbc95">
			</uni-segmented-control>
		</view>
	</view>
</template>

<script>
	import uniSegmentedControl from '@/components/uni-segmented-control/uni-segmented-control.vue'
	var scrollTop,tabTop,offsetTop = 0,tabHeight = 46,isClickTab=false,curScrollTop=0,getCount=0;
	export default {
		components: { uniSegmentedControl },
		name: 'tabber-fixed',
		props: {
			mode:{
				type:String,
				default:"scoll",
			},
			tabId:{
				type:String,
				default:"tab-bar"
			},
			items:{
				type: Array,
				default: function(e) {
				    return []
				}
			}
		},
		data() {
			return {
				index:0,
				itemTops:[],
				fixed:false
			}
		},
		created() {
			// #ifdef H5
			offsetTop = 0
			// #endif
		},
		methods: {
			tapTab(index) { 
				isClickTab = true;
				var th = this;
				if(this.mode=="display"){
					this.items[this.index].Display = 'none';
				}
				this.index = index;
				uni.createSelectorQuery().select("#" + this.items[index].ID).boundingClientRect(data => {
					if(this.mode=="scoll"){
						curScrollTop = data.top + (scrollTop==undefined ? 0 : scrollTop) - (tabHeight + offsetTop);
						uni.pageScrollTo({
							scrollTop: curScrollTop,
							duration: 300
						});
					}else{
						this.items[index].Display = 'block';
					}
				}).exec();
				
				if(index==(this.items.length-1)){
					setTimeout(function(){
						isClickTab = false;
					},1000);
				}
			},
			toScroll(e) {
				if(scrollTop==undefined)
				{
					let view = uni.createSelectorQuery().in(this).select("#" + this.tabId);
					view.fields({
					  size: true,
					  rect:true
					}, data => {
						if(data!=undefined){
							tabHeight = data.height;
							tabTop = data.top + e.scrollTop - offsetTop;
						}
					}).exec();
				}
 
				// if(isClickTab && e.scrollTop<scrollTop && this.index==(this.items.length-1) ){
				// 	isClickTab = false;
				// }
				// 
                scrollTop = e.scrollTop;
				if(scrollTop>tabTop)
				{
					this.items.forEach((item,index)=>{
						uni.createSelectorQuery().select("#" + item.ID).boundingClientRect(data => {
							this.itemTops[index] = data.top + e.scrollTop - (tabHeight +  offsetTop);
						}).exec();
					});
					
					if(!this.fixed){
					   this.fixed = true;
					}
					
					//自动判断在那个tab下
					if(!isClickTab){
						var scrollIndex = 0;
						this.itemTops.forEach((item,index)=>{
							if((scrollTop+2)>=item){
								scrollIndex = index;
							}
						});
						if(this.index != scrollIndex){
							this.index = scrollIndex;
						}
					}else{
						if(scrollTop>=curScrollTop){
							isClickTab = false;
						}
					}
				}else if(scrollTop<tabTop && this.fixed){
					this.fixed = false;
				}
			}
		}
	}
</script>

<style scoped lang="scss">
	/* 动态固定tab样式 */
	.app-tab-dt{
		position: relative;
		height: 46px;
		.tab-dt{
			width: 100%;
			position: absolute;
			top: 0;
			z-index: 2;
		}
		.tab-fixed{
			position: fixed;
			/* #ifdef MP-WEIXIN */
			top: 0px;
			/* #endif */

			/* #ifdef H5 */
			top: 44px;
			/* #endif */
			left: 0;
			right: 0;
			z-index: 2;
		}
	}
</style>
